<template>
	<view class="">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="工时" required name="houes">
					<uni-easyinput v-model="valiFormData.houes" placeholder="请输入工时" />
				</uni-forms-item>
				<uni-forms-item label="工价" required name="price">
					<uni-easyinput v-model="valiFormData.price" placeholder="请输入员工单价" />
				</uni-forms-item>
				<uni-forms-item label="原价" required name="lineprice">
					<uni-easyinput v-model="valiFormData.lineprice" placeholder="请输入原价" />
				</uni-forms-item>
				<uni-forms-item label="岗位" required name="post">
					<uni-easyinput v-model="valiFormData.post" placeholder="请输入岗位" />
				</uni-forms-item>
				<uni-forms-item label="工厂" required name="factory">
					<uni-easyinput v-model="valiFormData.factory" placeholder="请输入工厂名字" />
				</uni-forms-item>
				<uni-forms-item label="日期" required>
					<view @click="datetimeclick()">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single"></uni-datetime-picker>
					</view>

				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">添加</button>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="400"></uni-popup-message>
			</uni-popup>
		</view>


	</view>
</template>


<script>
	import code from '../../uni_modules/uview-ui/libs/config/props/code'
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '',
				value: '',
				// 基础表单数据
				valiFormData: {
					name: '',
					houes: '',
					post: '',
					price: '',
					lineprice: '',
					factory: '',
					databy: ''
				},
				// 设置默认选中当前日期
				single: '',
				// 校验规则
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '姓名不能为空'
							}, // 对name字段进行长度验证
							{
								minLength: 1,
								maxLength: 8,
								errorMessage: '名字的长度在 {minLength} 到 {maxLength} 个字',
							}
						]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					lineprice: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					houes: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					post: {
						rules: [{
								required: true,
								errorMessage: '不能为空'
							}, // 对name字段进行长度验证
							{
								minLength: 1,
								maxLength: 14,
								errorMessage: '岗位长度在 {minLength} 到 {maxLength} 个字，请使用简称',
							}
						]
					},
					factory: {
						rules: [{
								required: true,
								errorMessage: '不能为空'
							}, // 对name字段进行长度验证
							{
								minLength: 1,
								maxLength: 22,
								errorMessage: '工厂长度在 {minLength} 到 {maxLength} 个字，请使用简称',
							}
						]
					}
				}
			}
		},
		created() {
			const date = new Date()
			date.setHours(date.getHours()) // 增加 8 小时，转换为北京时间
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0') // 月份补零
			const day = String(date.getDate()).padStart(2, '0') // 日期补零
			this.single = `${year}-${month}-${day}`
		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			submit(ref) {
				console.log(ref)
				const that = this
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					console.log(this.single)
					res.databy = this.single
					that.api.WordInsert(res).then(res => {
						console.log(res)
						if (res.num) {
							this.msgType = 'success'
							this.messageText = `成功添加 `+this.valiFormData.name
							this.$refs.message.open()
							this.valiFormData.name = ''
						} else {
							this.msgType = 'error'
							this.messageText = `添加错误！`
							this.$refs.message.open()
						}
					})

				}).catch(err => {
					console.log('err', err);
				})
			},
			datetimeclick() {
				console.log('maskClick事件:', this.single);
			}
		}
	}
</script>

<style scoped lang="scss">
	// 表单样式
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	// 时间样式
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>